<template>
  <div>
    <!-- 第一个下拉框 -->
    <el-select @change='changeIndex' v-model="cityIndex" :placeholder="$t('questionNew.PleaseChoice')">
    <el-option
      v-for="(item,index) in cityOptions"
      :key="item.value"
      :label="item.label"
      :value="index">
    </el-option>
  </el-select>
  <!-- 第二个下拉框 -->
   <el-select @change="onBlur" v-model="areaName" :placeholder="$t('questionNew.PleaseChoice')">
    <el-option
      v-for="item in areaOptions"
      :key="item.areaName"
      :label="item.label"
      :value="item.label">
    </el-option>
  </el-select>
  </div>
</template>
<script>
import areaData from './../CityPicker-master/city-data/area'
import cityData from './../CityPicker-master/city-data/city'
export default {
  name: 'CityPicker',
  data () {
    return {
      cityOptions: [],
      areaOptions: [],
      cityIndex: '',
      areaName: '',
      cityName: '',
      newArea: []
    }
  },

  created () {
    this.mapcityData()
  },

  methods: {
    mapcityData () {
      // console.log(cityData)
      cityData.map(item => {
        this.cityOptions.push(...item)
      })
    },
    changeIndex () {
      this.areaName = ''
      areaData.forEach(item => {
        this.newArea.push(...item)
      })
      this.areaOptions = this.newArea[this.cityIndex]
      const name = this.cityOptions.find((item, index) => index === this.cityIndex)
      this.cityName = name.label
      this.$emit('biankong')
    },
    onBlur () {
      // console.log(this.areaName)
      // console.log(this.cityName)
      this.$emit('cityName', this.areaName, this.cityName)
    }
  }
}
</script>

<style scoped lang='less'>

</style>
